<template>
  <div class="poollist">
    <div class="span">
      客户限制数量:<span class="red">{{ totalSize }}</span
      >/ <span class="red">无限制</span>
    </div>
    <List
      :linklist="linklist"
      :tableData="tableData"
      :btnList="btnList"
      :titleList="titleList"
      :isCheck="isCheck"
      @getCheck="getCheck"
      @Delpool="poolList"
    />
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in employee"
        :key="item.employee_id"
        :label="item.employee_name"
        :value="item.employee_id"
      >
      </el-option>
    </el-select>
    <el-button type="primary" @click="moveToOthers">转移</el-button>
    <el-button type="info" @click="BatchDelete">
      <i class="el-icon-delete"></i> 删除至回收站</el-button
    >
    <el-button type="info" @click="emptying"
      ><i class="el-icon-setting"></i>清空公海所有数据</el-button
    >
    <Paging :total="totalSize" @getLimit="getLimit" @getPage="getPage" />
  </div>
</template>

<script>
import List from "../../components/List.vue";
import Paging from "../../components/Paging.vue";
import {EmployeeAxios} from "../../http/apis/customerseasApi"
import {
  poolListAxios,
  MoveToOthersAxios,
  BatchDeleteAxios,
} from "../../http/apis/customerseasApi/";
import { timeFormat } from "../../utils/utils";
import { mapActions, mapState } from "vuex";

export default {
  name: "PoolList",
  components: {
    List,
    Paging,
  },
  computed: {
    ...mapState("customerSeasStore", ["searchVal"]),
  },

  data() {
    return {
      // currentPage: 1, //当前页
      // pageSize: 3, //页数
      totalSize: 0,
      checkVal: [],
      tableData: [
        // {
        //   name: "xx",
        //   linkman: "张三",
        //   phonenumber: "17899977654",
        //   email: "123",
        //   postalcode: "610000",
        //   source: "手动录入",
        //   entrytime: "2021-12-1",
        //   update: "2021-12-2",
        //   applicant: "超级管理员",
        //   applicationtime: "2021-12-1",
        // },
        // {
        //   name: "yy",
        //   linkman: "李四",
        //   phonenumber: "17899977654",
        //   email: "123",
        //   postalcode: "610000",
        //   source: "手动录入",
        //   entrytime: "2021-12-1",
        //   update: "2021-12-2",
        //   applicant: "超级管理员",
        //   applicationtime: "2021-12-1",
        // },
        // {
        //   name: "yy",
        //   linkman: "李四",
        //   phonenumber: "17899977654",
        //   email: "123",
        //   postalcode: "610000",
        //   source: "手动录入",
        //   entrytime: "2021-12-1",
        //   update: "2021-12-2",
        //   applicant: "超级管理员",
        //   applicationtime: "2021-12-1",
        // },
        // {
        //   name: "yy",
        //   linkman: "李四",
        //   phonenumber: "17899977654",
        //   email: "123",
        //   postalcode: "610000",
        //   source: "手动录入",
        //   entrytime: "2021-12-1",
        //   update: "2021-12-2",
        //   applicant: "超级管理员",
        //   applicationtime: "2021-12-1",
        // },
      ],
      linklist: [
        {
          id: "0",
          name: "客户名称",
          isRouter: false,
          // url: "/information/seasinformation",
        },
        {
          id: "1",
          name: "联系人",
          isRouter: false,
        },
        {
          id: "2",
          name: "手机号码",
          isRouter: false,
        },
        {
          id: "3",
          name: "电子邮箱",
          isRouter: false,
        },
        {
          id: "4",
          name: "qq",
          isRouter: false,
        },
        {
          id: "5",
          name: "邮编",
          isRouter: false,
        },
        {
          id: "6",
          name: "客户来源",
          isRouter: false,
        },
        {
          id: "7",
          name: "客户类型",
          isRouter: false,
        },
        {
          id: "8",
          name: "地址",
          isRouter: false,
        },
        {
          id: "9",
          name: "录入时间",
          isRouter: false,
        },
        {
          id: "10",
          name: "最后更新",
          isRouter: false,
        },
        // {
        //   id: "11",
        //   name: "申请人",
        //   isRouter: false,
        // },
        // {
        //   id: "12",
        //   name: "申请时间",
        //   isRouter: false,
        // },
      ],
      btnList: [
        {
          id: "1",
          name: "详情",
          type: "公海",
        },
        {
          id: "2",
          name: "申请",
          type: "公海",
        },
        {
          id: "3",
          name: "修改",
          type: "公海",
        },
        {
          id: "4",
          name: "删除",
          type: "公海",
        },
      ],
      titleList: [
        "customer_name", //客户名称
        "contact_name", //联系人
        "contact_phone", //手机号码
        "contact_email", //电子邮箱
        "qq",
        "post_code", //邮编
        "origin", //客户来源
        "type", //客户类型
        "address", //详细地址
        "import_Date", //录入时间
        "update_Date", //更新时间
        // "applicant",//申请人
        // "applicationtime",//申请时间
        "remark", //备注
        "application_status", //状态
        "cp_id",
        "employee_id",
        "customer_records_id", //记录id
      ],
      options: [
        {
          value: "选项1",
          label: "超级管理员",
        },
      ],
      value: "",
      isCheck: true,
      statusval: 0,
      getreqData: {
        currentPage: 1,
        data: {},
        pageSize: 3,
      },
      employee:[]
    };
  },
  created() {
    EmployeeAxios().then((res) => {
      this.employee = res.data.data;
    });
    this.$delete(this.getreqData, "customer_name");
    this.poolList();
  },
  watch: {
    searchVal: function (val) {
      console.log(val);
      this.$set(this.getreqData.data, "customer_name", val);
      if (val === "") {
        this.$delete(this.getreqData.data, "customer_name");
      }
      this.poolList();
    },
  },
  methods: {
    ...mapActions("customerSeasStore", ["PoolSearchAction"]),
    // handleClick(row) {
    //   console.log(row);
    // },
    // 分页
    getPage(val) {
      console.log(val);
      this.getreqData.currentPage = val;
      this.poolList();
      // this.sendRequest();
    },

    getLimit(val) {
      console.log(val);
      this.getreqData.pageSize = val;
      this.poolList();
      // this.sendRequest();
    },
    getCheck(val) {
      console.log(val);
      this.checkVal = val;
    },

    poolList() {
      this.tableData = [];
      poolListAxios(this.getreqData)
        .then((res) => {
          console.log("请求成功:", res.data.data);
          // console.log(this.currentPage, this.pageSize);
          let arr = res.data.data.list; //将后端数据放入新数组
          arr.forEach((item) => {
            //遍历
            console.log(item.customer.customer_id);
            let obj = {
              customer_id: item.customer.customer_id,
              customer_name: item.customer.customer_name, //客户名称
              contact_name: item.customer.contact[0].contact_name, //联系人
              contact_phone: item.customer.contact[0].contact_phone, //电话号码
              contact_email: item.customer.contact[0].contact_email, //电子邮箱
              post_code: item.customer.post_code, //邮编
              origin: item.customer.origin, //客户来源
              type: item.customer.type, //客户类型
              import_Date: timeFormat(
                item.customer.customer_records.import_date
              ), //录入时间
              update_Date: timeFormat(
                item.customer.customer_records.update_date
              ), //更新时间
              remark: item.customer.remark, //备注
              address: item.customer.address, //地址
              qq: item.customer.contact[0].contact_qq,
              application_status: item.application_status, //状态
              cp_id: item.cp_id,
              customer_records_id:
                item.customer.customer_records.customer_records_id,
              employee_id: item.employee.employee_id, //业务员id
            };
            // 将数据加入显示表中
            this.tableData.push(obj);
          });
          // 计算条数
          this.totalSize = res.data.data.totalSize;
        })
        .catch((err) => {
          console.log("请求失败:", err);
        });
    },

    //搜索请求
    // sendRequest(val) {
    //   this.tableData = [];
    //   this.PoolSearchAction({
    //     currentPage: this.currentPage,
    //     pageSize: this.pageSize,
    //     val
    //   })
    //     .then((obj) => {
    //       console.log("获取公海列表搜索成功", obj);
    //       this.tableData = obj.dataArr;
    //       this.totalSize = obj.totalSize;
    //     })
    //     .catch((err) => {
    //       console.log("获取公海列表搜索失败:", err);
    //     });
    // },

    //转移至其他 缺参数
    moveToOthers() {
      console.log(this.checkVal);
      MoveToOthersAxios({
        customerIds: this.checkVal,
        employeeId: this.value,
      })
        .then(() => {
          this.$message({
            type: "SUCCESS",
            message: "转移成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "转移失败",
          });
        });
    },

    // 批量删除
    BatchDelete() {
      BatchDeleteAxios({
        customerIds: this.checkVal,
        delInfo: [0],
        remark: "删除至回收站",
      })
        .then((res) => {
          console.log(res);
          this.$message({
            type: "SUCCESS",
            message: "删除至回收站成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "删除失败",
          });
        });
    },
    emptying() {
      alert(
        "确定要清空公海所有数据吗？公海所有数据将直接彻底删除，不进入回收站，无法恢复!!公海客户关联记录如联系人，跟单，订单，合同等信息将同时被删除!!"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.el-select {
  width: 100px;
}
.red {
  color: red;
}
.span {
  float: right;
  height: 50px;
  margin-right: 20px;
}
</style>